<clr-wizard
    #wizard
    [(clrWizardOpen)]="addRobotOpened"
    (clrWizardOnCancel)="cancel()">
    <clr-wizard-title>
        <h3 *ngIf="!isEditMode" class="modal-title">
            {{ 'SYSTEM_ROBOT.CREATE_ROBOT' | translate }}
        </h3>
        <h3 *ngIf="isEditMode" class="modal-title">
            {{ 'SYSTEM_ROBOT.EDIT_ROBOT' | translate }}
        </h3>
        <p *ngIf="!isEditMode" class="mt-0">
            {{ 'SYSTEM_ROBOT.CREATE_ROBOT_SUMMARY' | translate }}
        </p>
        <p *ngIf="isEditMode" class="mt-0">
            {{ 'SYSTEM_ROBOT.EDIT_ROBOT_SUMMARY' | translate }}
        </p></clr-wizard-title
    >
    <clr-wizard-button [type]="'cancel'">{{
        'BUTTON.CANCEL' | translate
    }}</clr-wizard-button>
    <clr-wizard-button [type]="'previous'">{{
        'ROBOT_ACCOUNT.BACK' | translate
    }}</clr-wizard-button>
    <clr-wizard-button [type]="'next'">{{
        'ROBOT_ACCOUNT.NEXT' | translate
    }}</clr-wizard-button>
    <clr-wizard-button [clrLoading]="saveBtnState" [type]="'finish'">{{
        'ROBOT_ACCOUNT.FINISH' | translate
    }}</clr-wizard-button>
    <clr-wizard-page
        [clrWizardPageNextDisabled]="
            !robotForm.valid || checkNameOnGoing || isNameExisting
        ">
        <ng-template clrPageTitle>{{
            'ROBOT_ACCOUNT.BASIC_INFO' | translate
        }}</ng-template>
        <form #robotForm="ngForm" class="clr-form clr-form-horizontal">
            <section class="form-block">
                <div class="clr-form-control">
                    <label for="name" class="clr-control-label required"
                        >{{ 'P2P_PROVIDER.NAME' | translate }}
                        <clr-tooltip *ngIf="!isEditMode">
                            <clr-icon
                                clrTooltipTrigger
                                shape="info-circle"
                                size="24"></clr-icon>
                            <clr-tooltip-content
                                clrPosition="top-right"
                                clrSize="lg"
                                *clrIfOpen>
                                <span>{{
                                    'SYSTEM_ROBOT.FINAL_SYSTEM_NAME_TIP'
                                        | translate
                                }}</span>
                            </clr-tooltip-content>
                        </clr-tooltip>
                    </label>
                    <div
                        class="clr-control-container"
                        [class.clr-error]="
                            ((name.dirty || name.touched) && name.invalid) ||
                            isNameExisting
                        ">
                        <div class="clr-input-wrapper">
                            <input
                                class="clr-input input-width"
                                [disabled]="loading || isEditMode"
                                type="text"
                                id="name"
                                [(ngModel)]="systemRobot.name"
                                required
                                pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$"
                                maxLengthExt="255"
                                autocomplete="off"
                                size="30"
                                name="name"
                                #name="ngModel"
                                (keyup)="inputName()" />
                            <clr-icon
                                class="clr-validate-icon"
                                shape="exclamation-circle"></clr-icon>
                            <span
                                class="spinner spinner-inline"
                                [hidden]="!checkNameOnGoing"></span>
                        </div>
                        <clr-control-error
                            *ngIf="
                                ((name.dirty || name.touched) &&
                                    name.invalid) ||
                                isNameExisting
                            ">
                            <span
                                *ngIf="
                                    !(
                                        (name.dirty || name.touched) &&
                                        name.invalid
                                    ) && isNameExisting
                                "
                                >{{
                                    'ROBOT_ACCOUNT.ACCOUNT_EXISTING' | translate
                                }}</span
                            >
                            <span
                                *ngIf="
                                    (name.dirty || name.touched) && name.invalid
                                "
                                >{{
                                    'SYSTEM_ROBOT.NAME_TOOLTIP' | translate
                                }}</span
                            >
                        </clr-control-error>
                    </div>
                </div>
                <clr-textarea-container class="mt-2">
                    <label>{{ 'DISTRIBUTION.DESCRIPTION' | translate }}</label>
                    <textarea
                        class="input-width"
                        clrTextarea
                        type="text"
                        id="description"
                        name="description"
                        [(ngModel)]="systemRobot.description"></textarea>
                </clr-textarea-container>
                <div class="clr-form-control mt-2">
                    <label class="clr-control-label required"
                        >{{ 'SYSTEM_ROBOT.EXPIRATION_TIME' | translate }}
                        <clr-tooltip>
                            <clr-icon
                                clrTooltipTrigger
                                shape="info-circle"
                                size="24"></clr-icon>
                            <clr-tooltip-content
                                clrPosition="top-right"
                                clrSize="lg"
                                *clrIfOpen>
                                <span>{{
                                    'SYSTEM_ROBOT.EXPIRATION_TIME_EXPLAIN'
                                        | translate
                                }}</span>
                            </clr-tooltip-content>
                        </clr-tooltip>
                    </label>
                    <div
                        class="clr-control-container input-width"
                        [class.clr-error]="
                            ((expiration.dirty || expiration.touched) &&
                                expiration.invalid) ||
                            isExpirationInvalid()
                        ">
                        <div class="flex">
                            <div class="clr-select-wrapper">
                                <select
                                    [ngModelOptions]="{ standalone: true }"
                                    (change)="changeExpirationType()"
                                    [(ngModel)]="expirationType"
                                    id="expiration-type"
                                    class="clr-select">
                                    <option *ngIf="!isEditMode" value="default">
                                        {{ systemExpirationDays }}
                                        {{
                                            'SYSTEM_ROBOT.EXPIRATION_DEFAULT'
                                                | translate
                                        }}
                                    </option>
                                    <option value="days">
                                        {{
                                            'SYSTEM_ROBOT.EXPIRATION_DAYS'
                                                | translate
                                        }}
                                    </option>
                                    <option value="never">
                                        {{
                                            'SYSTEM_ROBOT.EXPIRATION_NEVER'
                                                | translate
                                        }}
                                    </option>
                                </select>
                            </div>
                            <div class="clr-input-wrapper">
                                <input
                                    (input)="inputExpiration()"
                                    [disabled]="loadingSystemConfig"
                                    class="clr-input expiration-width"
                                    name="expiration"
                                    type="text"
                                    #expiration="ngModel"
                                    autocomplete="off"
                                    [(ngModel)]="systemRobot.duration"
                                    required
                                    pattern="^[\-1-9]{1}[0-9]*$"
                                    id="robotTokenExpiration"
                                    size="20" />
                                <clr-icon
                                    class="clr-validate-icon"
                                    shape="exclamation-circle"></clr-icon>
                                <span
                                    class="spinner spinner-inline"
                                    [hidden]="!loadingSystemConfig"></span>
                                <clr-control-error
                                    *ngIf="
                                        ((expiration.dirty ||
                                            expiration.touched) &&
                                            expiration.invalid) ||
                                        isExpirationInvalid()
                                    ">
                                    {{
                                        'SYSTEM_ROBOT.EXPIRATION_REQUIRED'
                                            | translate
                                    }}
                                </clr-control-error>
                            </div>
                        </div>
                        <clr-control-helper
                            *ngIf="
                                (isEditMode &&
                                    systemRobot?.duration > 0 &&
                                    !(
                                        (expiration.dirty ||
                                            expiration.touched) &&
                                        expiration.invalid
                                    )) ||
                                isExpirationInvalid()
                            ">
                            <span
                                [ngClass]="{
                                    showWarning: shouldShowWarning()
                                }">
                                <clr-icon
                                    *ngIf="shouldShowWarning()"
                                    class="alert-icon"
                                    shape="exclamation-triangle"></clr-icon
                                ><span>{{
                                    'SYSTEM_ROBOT.EXPIRES_AT' | translate
                                }}</span
                                >:
                                <span>{{
                                    calculateExpiresAt()
                                        | harborDatetime : 'short'
                                }}</span>
                            </span>
                        </clr-control-helper>
                    </div>
                </div>
            </section>
        </form>
    </clr-wizard-page>
    <clr-wizard-page class="pb-0">
        <ng-template clrPageTitle>{{
            'ROBOT_ACCOUNT.SELECT_SYSTEM_PERMISSIONS' | translate
        }}</ng-template>
        <form class="clr-form clr-form-horizontal">
            <section class="form-block">
                <robot-permissions-panel
                    [mode]="PermissionSelectPanelModes.NORMAL"
                    [(permissionsModel)]="permissionForSystem.access"
                    [candidatePermissions]="robotMetadata?.system">
                </robot-permissions-panel>
            </section>
        </form>
    </clr-wizard-page>

    <clr-wizard-page
        class="pb-0"
        (clrWizardPageOnLoad)="clrWizardPageOnLoad()"
        (clrWizardPageOnCommit)="save()"
        [clrWizardPagePreventDefaultNext]="true"
        [clrWizardPageNextDisabled]="disabled()">
        <ng-template clrPageTitle>{{
            'ROBOT_ACCOUNT.SELECT_PROJECT_PERMISSIONS' | translate
        }}</ng-template>
        <inline-alert></inline-alert>
        <form class="clr-form clr-form-horizontal pb-0 pt-0">
            <section class="form-block">
                <div class="clr-form-control mt-1">
                    <label class="clr-control-label">{{
                        'SYSTEM_ROBOT.COVER_ALL' | translate
                    }}</label>
                    <div class="clr-control-container">
                        <clr-checkbox-wrapper>
                            <input
                                clrCheckbox
                                id="coverAll"
                                name="coverAll"
                                type="checkbox"
                                [(ngModel)]="coverAll" />
                            <label>
                                <clr-tooltip>
                                    <clr-icon
                                        class="opacity-07"
                                        clrTooltipTrigger
                                        shape="info-circle"
                                        size="24"></clr-icon>
                                    <clr-tooltip-content
                                        clrPosition="bottom-right"
                                        clrSize="lg"
                                        *clrIfOpen>
                                        <span>{{
                                            'SYSTEM_ROBOT.COVER_ALL_EXPLAIN'
                                                | translate
                                        }}</span>
                                    </clr-tooltip-content>
                                </clr-tooltip>
                            </label>
                        </clr-checkbox-wrapper>
                    </div>
                </div>
                <div class="clr-form-control mt-0" *ngIf="coverAll">
                    <robot-permissions-panel
                        [mode]="PermissionSelectPanelModes.NORMAL"
                        [(permissionsModel)]="permissionForCoverAll.access"
                        [candidatePermissions]="robotMetadata?.project">
                    </robot-permissions-panel>
                </div>
                <div
                    class="clr-form-control mt-1"
                    *ngIf="showPage3 && !coverAll">
                    <app-list-all-projects
                        [initDataForEdit]="
                            isEditMode ? systemRobot.permissions : null
                        "
                        [robotMetadata]="robotMetadata"
                        class="all-projects"></app-list-all-projects>
                </div>
            </section>
        </form>
    </clr-wizard-page>
</clr-wizard>
